<template>
  <div>
    <el-row class="order">
      <el-col :span="20" class="headered">
        <div class="grid-content bg-purple-dark orderList ddgl">订单管理</div>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="dialogTableVisible = true"
          >添加订单</el-button
        >
        <el-dialog :visible.sync="dialogTableVisible" class="dialogSize">
          <el-tabs type="card" @tab-click="tabClick">
            <el-tab-pane label="预约理赔服务" name="first"> </el-tab-pane>
            <el-tab-pane label="验车服务" name="second"> </el-tab-pane>
            <el-tab-pane label="领标服务" name="third"> </el-tab-pane>
            <el-tab-pane label="新车上牌" name="fourth"> </el-tab-pane>
            <el-tab-pane label="异地委托" name="five"> </el-tab-pane>
          </el-tabs>
          <div>
            <component
              :is="contentComponent"
              @getchidval="getChild"
            ></component>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" class="chaxun">
        <div class="grid-content bg-purple">
          <!--查询部分-->
          <el-form
            :inline="true"
            :model="searchForm"
            class="demo-form-inline  searchForm"
          >
            <el-form-item>
              <el-input
                v-model="searchForm.safeorderUserphone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单类型">
              <el-select
                v-model="searchOrderType"
                placeholder="订单类型"
                @change="getValue"
              >
                <el-option
                  v-for="item in OrderType"
                  :label="item.orderType_name"
                  :value="item.orderType_id"
                  :key="item.orderType_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select
                v-model="OrderState.orderState_name"
                placeholder="订单状态"
                @change="getStateValue"
              >
                <el-option
                  v-for="item in OrderState"
                  :label="item.orderState_name"
                  :value="item.orderState_id"
                  :key="item.orderState_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="searchForm.dateStart"
                    style="width: 100%;"
                    @change="dateChangeStart"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">至</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="searchForm.dateEnd"
                    style="width: 100%;"
                    @change="dateChangeEnd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="searchOrder(OrderType)"
                class="white"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--修改-->
    <!--    <div class="editDept">-->
    <!--      <el-dialog title="修改订单信息" :visible.sync="dialogEditVisible">-->
    <!--        <el-form :model="editform">-->
    <!--          <el-form-item label="手机号">-->
    <!--            <el-input v-model="editform.safeorderUserphone" autocomplete="off"></el-input>-->
    <!--          </el-form-item><el-form-item label="还车司机">-->
    <!--            <el-input v-model="editform.safeorderBackdriver" autocomplete="off"></el-input>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="接车司机">-->
    <!--            <el-input v-model="editform.safeorderGodriver" autocomplete="off">-->
    <!--            </el-input>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="订单状态">-->
    <!--            <el-select v-model="editform.safeorderSate" placeholder="订单状态" @change="getValue">-->
    <!--              <el-option v-for="item in OrderState"-->
    <!--                         :label="item.orderState_name"-->
    <!--                         :value="item.orderState_id" :key="item.orderState_id"></el-option>-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--        <div slot="footer" class="dialog-footer">-->
    <!--          <el-button @click="dialogEditVisible = false" class="white">取 消</el-button>-->
    <!--          <el-button type="primary" @click="editDept" class="white">保 存</el-button>-->
    <!--        </div>-->
    <!--      </el-dialog>-->
    <!--    </div>-->
    <el-dialog title="修改订单信息" :visible.sync="dialogEditVisible">
      <el-form :model="editform">
        <el-form-item label="手机号">
          <el-input
            v-model="editform.safeorderUserphone"
            autocomplete="off"
          ></el-input> </el-form-item
        ><el-form-item label="还车司机">
          <el-input
            v-model="editform.safeorderBackdriver"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="接车司机">
          <el-input v-model="editform.safeorderGodriver" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="editform.safeorderSate"
            placeholder="订单状态"
            @change="getValue"
          >
            <el-option
              v-for="item in OrderState"
              :label="item.orderState_name"
              :value="item.orderState_id"
              :key="item.orderState_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false" class="white"
          >取 消</el-button
        >
        <el-button type="primary" @click="editDept" class="white"
          >保 存</el-button
        >
      </div>
    </el-dialog>

    <!--数据部分-->
    <el-table :data="tableData.list" height="550" border style="width: 100%">
      <el-table-column type="selection" width="50px"></el-table-column>
      <el-table-column
        prop="safeorderNumber"
        label="订单编号"
      ></el-table-column>
      <el-table-column prop="safeorderType" label="订单类型"></el-table-column>
      <el-table-column prop="safeorderUser" label="姓名"></el-table-column>
      <el-table-column
        prop="safeorderGoaddress"
        label="接车地址"
      ></el-table-column>
      <el-table-column prop="safeordercome" label="订单来源"
        >后台录入</el-table-column
      >
      <el-table-column
        prop="safeorderUserphone"
        label="手机号"
      ></el-table-column>
      <el-table-column
        prop="safeorderCarnumber"
        label="车牌号"
      ></el-table-column>
      <el-table-column
        prop="safeorderGodriver"
        label="接车司机"
      ></el-table-column>
      <el-table-column
        prop="safeorderBackdriver"
        label="还车司机"
      ></el-table-column>
      <el-table-column prop="safeorderSate" label="订单状态"></el-table-column>
      <el-table-column
        prop="safeorderCreated"
        :formatter="DataChange"
        label="下单时间"
      ></el-table-column>
      <el-table-column prop="safeorderPaynumber" label="付款状态"
        >待付款</el-table-column
      >
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row)" class="cText">
            修 改
          </el-button>
          <el-button type="danger" @click="del(scope.row.id)" class="cText">
            删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页部分-->
    <div class="block">
      <el-pagination
        background
        :current-page="tableData.start"
        :page-size="tableData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total"
        @current-change="func"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Remote from "../components/Remote";
import Newcar from "../components/Newcar";
import Mark from "../components/markOrder";
import Car from "../components/claimsCar";
import Order from "../components/claimsOrderOne";


export default {
  name: "order",
  data() {
    return {
      //添加订单里tabs的组件
      contentComponent: "Order",
      searchOrderType: "",
      OrderType: [],
      OrderState: [],
      tableData: [], //表格数据
      //当前页
      currentPage: 1,
      //总数据
      totalCount: null,
      //添加
      dialogTableVisible: false,
      dialogorderVisible: false,
      //修改
      dialogEditVisible: false,
      editState: {},
      editform: {},
      //查询
      searchType: "",
      searchForm: {
        safeorderUserphone: "",
        safeorderType: "",
        safeorderSate: "",
        dateStart: "",
        dateEnd: "",
        start: "",
        page: ""
      }
    };
  },
  components: {
    Car,
    Order,
    Mark,
    Newcar,
    Remote
  },
  //向服务器请求数据
  created() {
    this.getOrderType();
    this.getOrderState();
    this.findall(1, 5);
  },
  methods: {
    //子传父
    getChild() {
      //关闭弹出框
      this.dialogTableVisible = false;
    },
    //点击切换添加订单的组件
    tabClick: function(tab) {
      // if(tab.name=="first"){
      //   this.contentComponent="Order";
      // }else{
      //   this.contentComponent="Car";
      // }
      switch (tab.name) {
        case "first":
          this.contentComponent = "Order";
          break;
        case "second":
          this.contentComponent = "Car";
          break;
        case "third":
          this.contentComponent = "Mark";
          break;
        case "fourth":
          this.contentComponent = "Newcar";
          break;
        case "five":
          this.contentComponent = "Remote";
          break;
      }
    },
    //获取订单类型
    getOrderType: function() {
      this.$axios
        .post(this.$api.orderManage.ordertype, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          this.$set(this.$data, "OrderType", response.data.data);
          // let result = response.data.data;
          // this.OrderType = result
          //console.log(this.OrderType)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取订单状态
    getOrderState: function() {
      this.$axios
        .post(this.$api.orderManage.orderstate, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          // let result = response.data.data;
          // console.log(result)
          this.$set(this.$data, "OrderState", response.data.data);
          // this.OrderState = result
          //console.log(this.OrderState)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取订单类型改变后的值
    getValue: function(val) {
      this.searchType = val;
    },
    getStateValue: function(val) {
      this.StateType = val;
      //console.log(1)
    },
    //获取时间改变的值
    dateChangeStart(val) {
      var year = val.getFullYear();
      var month = val.getMonth() + 1;
      var day = val.getDate();
      this.dateStart = year + "-" + month + "-" + day;
      console.log(this.dateStart);
      console.log(year);
      console.log(month);
      console.log(day);
      console.log(this.dateStart);
    },
    dateChangeEnd(val) {
      var year = val.getFullYear();
      var month = val.getMonth() + 1;
      var day = val.getDate();
      this.dateEnd = year + "-" + month + "-" + day;
      console.log(this.dateEnd);
      console.log(year);
      console.log(month);
      console.log(day);
    },
    //将列表显示的数据写成一个方法，必要时方便调用
    findall: function(start, page) {
      this.$axios
        .post(
          this.$api.orderManage.pagefind,
          JSON.stringify({ start: start, page: page }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data.data; //response.data指数据库返回的数据
          console.log("response = ", response);
          if (response.status == 200) {
            this.tableData = result;
            //console.log(this.tableData);
            //console.log(response);
            // this.totalCount = result.len;
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          this.$alert("出错了");
          console.log(err);
        });
    },
    //分页
    func: function(val) {
      console.log(val);
      this.currentPage = val;
      this.findall(val, 5);
    },

    DataChange: function(row) {
      return new Date(row.safeorderCreated).toLocaleDateString();
    },

    del: function(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(
              this.$api.orderManage.del,
              {
                id: id
              },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              //console.log(response);
              // let result = response.data;
              if (response.status === 200) {
                this.findall(this.currentPage, 5);
                console.log(this.currentPage);
              }
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改数据
    edit: function(obj) {
      //修改数据数据库传过来的是对象
      this.dialogEditVisible = true;
      this.editform = obj;
      //console.log(this.OrderState)
    },
    editDept: function() {
      console.log(this.editform.safeorderSate);
      //将修改的数据发给服务器，服务器接收响应并处理
      this.$axios
        .post(
          this.$api.orderManage.up,
          {
            id: this.editform.id,
            safeorderUserphone: this.editform.safeorderUserphone,
            safeorderBackdriver: this.editform.safeorderBackdriver,
            safeorderGodriver: this.editform.safeorderGodriver,
            safeorderStateid: this.editform.safeorderSate
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response)
          if (response.data.msg === "修改成功") {
            this.findall(1, 5);
            this.dialogEditVisible = false;
          } else {
            this.$alert(response.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    //查询
    searchOrder: function() {
      this.$axios
        .post(
          this.$api.orderManage.otherfind,
          JSON.stringify({
            safeorderTypeid: this.searchType,
            safeorderStateid: this.StateType,
            safeorderGoaddress: "",
            safeorderUserphone: this.searchForm.safeorderUserphone,
            safeordercome: "",
            beginTime: this.dateStart,
            endTime: this.dateEnd,
            start: "",
            page: ""
          }),
          {
            headers: { "Content-Type": "application/json" }
          }
        )
        .then(response => {
          console.log(response);
          if (response.status === 200) {
            this.tableData.list = response.data.data.list;
            this.tableData.total = response.data.data.total;
            console.log("tableData.list = ", this.tableData.list);
            console.log("tableData = ", this.tableData);
            console.log(this.tableData.list);
          } else {
            this.$alert(response.data.msg);
            this.tableData.list = response.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
          this.tableData.list = [];
        });
    }
    //跳转
    // Claims: function() {
    //   this.$router.push("/claimsOrderOne")
    // }
  }
};
</script>

<style scoped>
.addDept,
.searchForm {
  padding: 10px 10px;
}
.order {
  padding: 10px 0;
  border-bottom: 1px solid grey;
  width: 100% !important;
}
.orderList {
  margin-left: 30px;
}
.el-table-column {
  text-align: center;
}
/*分页*/
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
.ddgl {
  text-align: left !important;
}
.chaxun {
  width: 100% !important;
}
/*yuechen update by 2020/9/29*/
</style>
